<script setup>
import {Back, Edit, User} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
const router = useRouter()
</script>

<template>
  <div class="personCenterAll">
    <!-- 顶部-->
    <div class="top"></div>
    <!--  中间-->
    <div class="middle">
      <div class="middle_left">
        <!--  菜单-->
          <p @click="router.push('/')"><el-icon><Back /></el-icon>返回</p>
          <p @click="router.push('/personCenter/myLoginInfo')"><el-icon><User /></el-icon>我的登录信息</p>
          <p @click="router.push('/personCenter/modPassword')"><el-icon><Edit /></el-icon>修改密码</p>
      </div>
      <div class="middle_right">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<style scoped>
.middle_left p{
  padding-left: 40px;
  cursor: pointer;
  width: 83%;
  height: 60px;
  line-height: 60px;
}
.middle_left p:hover{
  background-color: #13ce66;
}
.middle_left {
  padding-top: 30px;
  width: 15%;
  height: 500px;
  background-color: #EEEDFF;
}

.middle {
  width: 90%;
  height: 530px;
  background-color:#EAECDD;
  margin: 0 auto;
  display: flex;
}

.top {
  width: 90%;
  height: 90px;
  margin: 0 auto;
  background-color: #13ce66;
}
</style>
